<template>
	<div>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="orderBy" label="排序" width="50"></el-table-column>
			<el-table-column prop="name" label="模板名称" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span class="cup" @click="handleEdit(row)">{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="code" label="模板编号" width="100">
				<template slot-scope="{ row }">
					<span>{{ row.code || '--' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="模板类型" width="100">
				<template slot-scope="{ row }">
					<span v-if="row.type == 0">首页</span>
					<span v-if="row.type == 1">单篇文章</span>
					<span v-if="row.type == 2">列表页</span>
					<span v-if="row.type == 3">图片列表页</span>
					<span v-if="row.type == 4">书籍列表页</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="使用状态" width="100">
				<template slot-scope="{ row }">
					<span v-if="row.status == 1" class="color-primary">使用</span>
					<span v-else class="color-danger">停用</span>
				</template>
			</el-table-column>
			<el-table-column prop="des" label="备注" width="120">
				<template slot-scope="{ row }">
					<span>{{ row.des || '--' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="220">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="success" size="mini" @click="handlePreview(row)">预览模板</el-button>
						<el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg"><el-empty :image-size="200"></el-empty></div>
		</el-table>
		<Pagination
			v-show="parseInt(pageObj.count) > 0"
			:total="parseInt(pageObj.count)"
			@change="getList"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
		/>
		<ImgPreview />
	</div>
</template>
<script>
export default {
	components: {
		ImgPreview: () => import('../netDisk/preview/Img.vue')
	},
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10
			},
			tableData: [],
			pageObj: {}
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshWebTemplateList', v => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshWebTemplateList');
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('queryWebTemplate', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
		},
		handlePreview(row) {
			let { fileList } = row;
			if (fileList && fileList.length) {
				this.$bus.$emit('showDialogimgPreview', fileList[0], fileList);
			} else {
				this.warnMsg('暂未上传模板');
			}
		},
		handleEdit(row) {
			this.$bus.$emit('showDialogWebTemplateAdd', row);
		},
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		async delete(row) {
			await this.$store.dispatch('deleteWebTemplate', row);
			this.getList();
		}
	}
};
</script>
